<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }
        nav{
            background: #d8d7df;
            height: 41px;
            border-top: 3px solid orange;
        }
        nav a {
            font-size: 14px;
            height: 41px;
            display: inline-block;
            text-decoration: none;
            padding: 0 15px;
            color: #4c4c4c;
            line-height: 41px;
        }

        nav a:hover {
            color: #5a6268;
        }

        .box {
            color: white;
            text-align: center;
            width: 100px;
            height: 100px;
            background-color: #5a6268;
            margin: 100px auto;
        }
        .image {
            display: block;
            height: 100%;
            margin: 8px auto;
        }

        .icon {
            height: 15px;
            width: 15px;
            line-height: 41px;
            display: inline-block;
            background: #fff url('images/fj.jpg') 0 0 no-repeat;
            background-size: contain;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: #5a6268;
            margin-top: 100px;
            margin-bottom: 50px;
            overflow: hidden;
        }

        #box2 {
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background-color: #5a6268;
        }

        #inner1 {
            width: 50px;
            height: 50px;
            margin: 24px;
            background-color: coral;
        }
        #box {
            overflow: hidden;
            margin-top: 100px;
            margin-left: 100px;
            width: 238px;
            height: 294px;
            border: 1px solid #f0ebf2;
            border-top: 3px solid #ff961c;
        }
        .title {
            font: 1em '微软雅黑', sans-serif;
            font-weight: normal;
            height: 35px;
            padding-left: 12px;
            line-height: 35px;
            border-bottom: 1px solid #f0ebf2;
        }
        .image {
            margin: 6px auto;
            width: 200px;
            height: 120px;
        }
        ul {
            font-size: 13px;
            padding-left: 12px;
            padding-right: 12px;
        }
        ul li {
            text-wrap: none;
            white-space: nowrap;
            overflow-x: hidden;
            line-height: 20px;
            text-overflow: ellipsis;
        }
        #sizing {
            margin: 100px;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            background-color: darkslategrey;
            box-shadow:6px 6px 15px #c7c7c7;

        }
    </style>
</head>
<body>

<div id="sizing">

</div>
<div id="box">
<h3 class="title">搜索趣图</h3>
    <img class="image" src="images/fj.jpg" alt="">
    <ul>
        <li><a href="#">开创我国工运事业工作新局面</a> </li>
        <li><a href="#">当好主人翁 建功新时代</a></li>
        <li><a href="#">习近平同马克龙互致贺电庆中法海洋卫星发射成功</a></li>
        <li><a href="#">原来你是这样的进博会</a></li>
    </ul>
</div>

<div id="box1">
    <div id="inner1">

    </div></div>
<div id="box2">
</div>
<nav>
    <a href="#">首页</a>
    <a href="#">手机新浪网</a>
    <a href="#">网站导航</a>
    <a href="#">三个字</a>
</nav>

<div class="box"><img class="image" src="images/fj.jpg"/></div>

</body>
</html>
